Flutter中使用chewie实现视频播放

2024-06-04 00:19| 来源: 网络整理| 查看: 265

1. 安装插件

配置 chewie 插件。

代码语言：javascript复制dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 flutter_html: ^1.1.0 flutter_inappwebview: ^4.0.0+4 device_info: ^1.0.0 amap_location: ^0.2.0 image_picker: ^0.6.7+21 # chewie的依赖 video_player: ^1.0.1 # 视频播放 chewie: ^0.12.2

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

注意：chewie插件依赖于video_player，所以video_player必须一起安装。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

代码语言：javascript复制import 'package:chewie/chewie.dart'; import 'package:video_player/video_player.dart';3. 使用插件代码语言：javascript复制// 声明控制器(两个) VideoPlayerController videoPlayerController; ChewieController chewieController; void initState(){ super.initState(); // 生成控制器(两个) videoPlayerController=VideoPlayerController.network( 'https://qiniu.xiaodengmi.com/a9ac5d86ca3109cb22ed805b1f227074.mp4' ); chewieController = ChewieController( videoPlayerController: videoPlayerController, // 比例 aspectRatio: 3/2, // 自动播放 autoPlay: true, // 循环 looping: true, ); }

在组件卸载时一定要销毁控制器。

代码语言：javascript复制@override void dispose() { // 销毁播放器的控制器 videoPlayerController.dispose(); chewieController.dispose(); super.dispose(); }4. 完整实例代码语言：javascript复制import 'package:flutter/material.dart'; import 'package:chewie/chewie.dart'; import 'package:video_player/video_player.dart'; class ChewieVideoPage extends StatefulWidget { ChewieVideoPage({Key key}) : super(key: key); @override _ChewieVideoPageState createState() => _ChewieVideoPageState(); } class _ChewieVideoPageState extends State { // 声明控制器(两个) VideoPlayerController videoPlayerController; ChewieController chewieController; void initState(){ super.initState(); // 生成控制器(两个) videoPlayerController=VideoPlayerController.network( 'https://qiniu.xiaodengmi.com/a9ac5d86ca3109cb22ed805b1f227074.mp4' ); chewieController = ChewieController( videoPlayerController: videoPlayerController, // 比例 aspectRatio: 3/2, // 自动播放 autoPlay: true, // 循环 looping: true, ); } @override void dispose() { // 销毁播放器的控制器 videoPlayerController.dispose(); chewieController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:Text('在线视频播放') ), // 加载播放器 body:Chewie( controller: chewieController, ) ); } }

参考：

https://pub.flutter-io.cn/packages/video_player

https://pub.flutter-io.cn/packages/chewie

【本文地址】

公司简介

联系我们